<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HXNT IP网络质量及应用监测系统</title>
<meta name="author" content="Simon Shu" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/easyui/themes/myself/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/easyui/themes/icon.css" />
<%@ include file="../common/taglibs.jsp"%>
<%@ include file="../common/meta.jsp"%>
<style type="text/css">
#fm {
	margin: 0;
	padding: 10px 30px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	color: #666;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 5px;
}

.fitem label {
	display: inline-block;
	width: 80px;
}
</style>
<script>
	var roleEnabled = [ {
		id : true,
		name : "是"
	}, {
		id : false,
		name : "否"
	} ];
	var roleId;
	$(function() {
		$("#role_enabled").combobox({
			data : roleEnabled,
			valueField : 'id',
			editable : false,
			textField : 'name'
		});
		$("#roleTable").datagrid({
			pagination : true, //分页显示 
			loadMsg : "请求中... 请稍候",
			url : "./list.action",			
			rownumbers : true,
			fitColumns : true,
			height : 'auto',
			frozenColumns : [ [ {
				field : 'ck',
				checkbox : true
			} ] ],
			columns : [ [ {
				field : 'id',
				hidden : true
			}, {
				field : 'code',
				title : '角色代码',
				width : 80,
				align : 'center',
				sortable : true
			}, {
				field : 'name',
				title : '角色名称',
				width : 80,
				align : 'center',
				sortable : true
			}, {
				field : 'description',
				title : '描述',
				width : 180,
				align : 'center',
				sortable : true
			}, {
				field : 'enabled',
				title : '是否有效',
				width : 80,
				align : 'center',
				formatter : function(value, row, index) {
					if (row.enabled == null) {
						return "";
					}
					if (row.enabled) {
						return '是';
					} else {
						return '否';
					}
				}
			} ] ],
			onDblClickRow : function(rowIndex, rowData) {
				$("#role_id").val(rowData.id);
				$("#role_name").val(rowData.name);
				$("#role_code").val(rowData.code);
				$("#role_desc").val(rowData.description);
				$("#role_enabled").combobox("setValue", rowData.enabled);
				$("#dlg").dialog('open').dialog('setTitle', '修改角色');
			},
			toolbar : [//工具栏上定义按钮 
			{
				id : 'btnadd',
				text : '增加',
				hidden : true,
				iconCls : 'icon-add',
				handler : function() {
					openNewWindows();

				}
			}, {
				id : 'btndel',
				text : '删除',
				iconCls : 'icon-remove',
				handler : function() {
					//删除选择的记录 
					delRole();
				}
			}, {
				id : 'btnedit',
				text : '修改',
				iconCls : 'icon-edit',
				handler : function() {
					//模态窗体显示 
					openEditStutable();
				}
			}, {
				id : 'btnSetting',
				text : '权限设置',
				iconCls : 'icon-setting',
				handler : function() {
					openSettingDialog();
				}
			} ]
		});
	});

	//将数据转化为 datagrid 数据 格式 
	function xorderListToGridData(msg) {
		var encoded = $.toJSON(msg)
		var griddata = $.evalJSON(encoded);
		return griddata;
	}

	//add 事件 
	function openNewWindows() {
		//清空控件中的的值 
		$("#role_id").val("");
		$("#role_code").val("");
		$("#role_name").val("");
		$("#role_desc").val("");
		$("#role_enabled").combobox("setValue", "");
		$('#dlg').dialog('open').dialog('setTitle', '新建角色');
	}

	//Ok 事件 
	function addStudentMessage() {
		//得到表格中的数据 
		var stuData = $("#roleTable").datagrid("getData");
		var ids = $("#role_id").val();

		$.ajax({
			type : 'post',
			url : './save.action',
			data : {
				"data.id" : $("#role_id").val(),
				"data.code" : $("#role_code").val(),
				"data.name" : $("#role_name").val(),
				"data.enabled" : $("#role_enabled").combobox("getValue"),
				"data.description" : $("#role_desc").val()
			},
			success : function(msg) {
				var griddata = xorderListToGridData(msg);
				var data = griddata.data;
				if (griddata.success) {
					if (ids == '') {
						stuData.total++;
						//加载行 
						stuData.rows.push(data);
						$("#roleTable").datagrid("loadData", stuData);
					} else {
						for ( var i = 0; i < stuData.rows.length; i++) {
							//如果 表格中的Id 和要进行修改的Id 相同的话 就进行修改 
							if (stuData.rows[i].id == ids) {
								$('#roleTable').datagrid('updateRow', {
									index : i,
									row : data
								});
							}
						}
					}
					$('#dlg').dialog('close');
				} else {
					$.messager.show({
						title : 'Error',
						msg : griddata.actionMessages[0]
					});
				}
			}
		});
	}

	//del 事件 
	function delRole() {

		//得到所有的数据 
		var stuData = $("#roleTable").datagrid("getData");
		//得到选中的数据 
		var rows = $("#roleTable").datagrid("getSelections");
		if (rows.length == 0) {
			$.messager.alert("系统提示", "请选择要删除的行！", 'info');
			return;
		}

		if (confirm('确定删除 这' + rows.length + '条记录?')) {
			var ids = [];
			for ( var i = 0; i < rows.length; i++) {
				for ( var j = 0; j < stuData.rows.length; j++) {
					if (stuData.rows[j].id == rows[i].id) {
						ids.push(rows[i].id);
						//$("#studentTable").datagrid("deleteRow", j);
					}
				}
			}

			$.ajax({
				type : 'post',
				url : './delete.action',
				data : {
					ids : ids.join(',')
				},
				success : function(msg) {
					var griddata = xorderListToGridData(msg);
					if (griddata.success) {
						$.messager.alert('Info', 'Delete successfully!');
						$("#roleTable").datagrid("load");
					} else {
						$.messager.show({
							title : 'Error',
							msg : griddata.actionMessages[0]
						});
					}
				}
			});
		}
	}

	//edit 事件 
	function openEditStutable() {
		$("#role_code").val("").attr({
			readOnly : true
		});
		var rows = $("#roleTable").datagrid('getSelections');
		if (rows == 0) {
			$.messager.alert("系统提示", "请选择要编辑的行！", 'info');
			return;
		}

		if (rows.length > 1) {
			$.messager.alert("系统提示", "对不起，该操作只能选择一行！", 'error');
			return;
		}

		for ( var i = 0; i < rows.length; i++) {
			if (rows[i].id != "") {
				$("#role_id").val(rows[i].id);
				$("#role_code").val(rows[i].code);
				$("#role_name").val(rows[i].name);
				$("#role_desc").val(rows[i].description);
				$("#role_enabled").combobox("setValue", rows[i].enabled);
			}
		}
		$("#dlg").dialog('open').dialog('setTitle', '修改角色');
	}

	function openSettingDialog() {
		var rows = $("#roleTable").datagrid('getSelections');
		if (rows == 0) {
			$.messager.alert("系统提示", "请选择要编辑的行！", 'info');
			return;
		}

		if (rows.length > 1) {
			$.messager.alert("系统提示", "对不起，该操作只能选择一行！", 'error');
			return;
		}

		roleId = rows[0].id;

		$.ajax({
			type : 'post',
			url : './getGrantXml.action',
			data : {
				roleId : rows[0].id
			},
			success : function(msg) {
				var griddata = xorderListToGridData(msg);
				if (griddata.success) {
					$('#tt').tree({
						checkbox : true,
						lines : true
					}).tree('loadData', griddata.trees);
				} else {
					$.messager.show({
						title : 'Error',
						msg : griddata.actionMessages[0]
					});
				}
			}
		});

		$("#grantDlg").dialog('open').dialog('setTitle', '角色授权');

	}

	function grantPermission() {
		var nodes = $('#tt').tree('getChecked');
		var functionIds = [];
		for ( var i = 0; i < nodes.length; i++) {
			functionIds.push(nodes[i].id);
		}
		$.ajax({
			type : 'post',
			url : './saveGrantPermission.action',
			data : {
				functions : functionIds.join(","),
				roleId : roleId
			},
			success : function(msg) {
				var griddata = xorderListToGridData(msg);
				if (griddata.success) {
					$.messager.alert("系统提示", "权限授权完成", 'info');
					$('#grantDlg').dialog('close');
				} else {
					$.messager.show({
						title : 'Error',
						msg : griddata.actionMessages[0]
					});
				}
			}
		});
	}
</script>
</head>
<body>
	<div id="content" class="easyui-panel"
		data-options="fit:true,border:false"
		style="padding: 3px 8px 10px 3px; overflow: hidden; margin: 0;">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center',border:false"
				style="padding: 5 5 0 5px; background: #edf7ff">
				<table class="easyui-datagrid" id="roleTable"
					data-options="singleSelect:true,toolbar:'#toolbar',border:true,fit:true,fitColumns:true">
				</table>

				<div id="toolbar"
					style="padding: 5px; padding-left: 10px; background: #EDF7FF">
					<a href="#" class="easyui-linkbutton" title="Add Pair"
						data-options="iconCls:'icon-add',plain:true" onclick="addPair()"></a>
					<a href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-edit',plain:true"
						onclick="editSport()"></a> <a href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-edit',plain:true"
						onclick="editSport()"></a> <a href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-edit',plain:true"
						onclick="editSport()"></a> <a href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-edit',plain:true"
						onclick="editSport()"></a> <a href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-edit',plain:true"
						onclick="editSport()"></a> <a href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-edit',plain:true"
						onclick="editSport()"></a> <a href="#" class="easyui-linkbutton"
						data-options="iconCls:'icon-remove',plain:true"
						onclick="removeSport()"></a>
				</div>
			</div>
		</div>
	</div>

	<div id="dlg" class="easyui-dialog"
		style="width: 400px; height: 250px; padding: 5px;" closed="true"
		buttons="#dlg-buttons">
		<div style="padding: 10px 0 10px 60px">
			<form id="ff" method="post">
				<input type="hidden" id="role_id" />
				<table>
					<tr>
						<td>角色代码:</td>
						<td><input class="easyui-validatebox" type="text"
							id="role_code" data-options="required:true"> </input></td>
					</tr>
					<tr>
						<td>角色名称:</td>
						<td><input class="easyui-validatebox" type="text"
							id="role_name" data-options="required:true"> </input></td>
					</tr>
					<tr>
						<td>角色描述:</td>
						<td><input class="easyui-validatebox" type="text"
							id="role_desc"> </input></td>
					</tr>
					<tr>
						<td>是否启用:</td>
						<td><select id="role_enabled" class="easyui-combobox"
							style="width: 120px;">
						</select></td>
					</tr>
				</table>
			</form>
		</div>
		<div style="text-align: center; padding: 5px">
			<a href="#" class="easyui-linkbutton" onclick="addStudentMessage();"
				style="width: 50px">保存</a> <a href="#" class="easyui-linkbutton"
				onclick="$('#dlg').dialog('close');" style="width: 50px">取消</a>
		</div>
	</div>
	<div id="grantDlg" class="easyui-dialog"
		style="width: 400px; height: 300px; padding: 5px; overflow: auto;"
		closed="true" buttons="#dlg-buttons">
		<div style="padding: 10px 0 10px 10px; overflow: auto;">
			<ul id="tt">
			</ul>
		</div>
		<div style="text-align: center; padding: 5px">
			<a href="#" class="easyui-linkbutton" onclick="grantPermission();"
				style="width: 50px">保存</a> <a href="#" class="easyui-linkbutton"
				onclick="$('#grantDlg').dialog('close');" style="width: 50px">取消</a>
		</div>
	</div>
</body>
</html>
